<!-- 终端详情-基本信息 -->
<template>
  <view>
    <view class="top-bg">
      <u-sticky>
        <view class="return" @click="goToBack()">
          <u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
        </view>
        基本信息
      </u-sticky>
    </view>
    <view class="cardContent">
      <!-- <uni-section style="padding-left: 0;" title="终端名称">
        <template v-slot:decoration>
          <view class="decoration"></view>
        </template>
      </uni-section> -->
      <view class="terminalName">终端名称：{{formData.terminalName}}</view>
      <!-- <view class="rowStyle cardTitle">{{formData.equType}}{{ formData.pipPointNo === 'YKWS1' ? '（进）': formData.pipPointNo === 'YKWS2' ? '（出）': '' }}
        <span :class="formData.onlintStatus === '在线' ? 'online' : formData.onlintStatus === '离线' ? 'offline': formData.onlintStatus === '异常' ? 'abnormal': formData.onlintStatus === '未激活' ? 'notActive' : ''">{{formData.onlintStatus}}</span></view> -->
      <!-- <view class="rowStyle">
        <view class="label">处理工艺</view>
        <view class="value">{{formData.equName}}</view>
      </view> -->
      <van-cell-group>
        <van-cell title="处理工艺" :value="formData.treatmentTechnology || '-'" />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="受益农户" :value="formData.beneficiaryFarmers || '-'" />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="占地面积" :value="formData.floorSpace || '-'" />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="经度" :value="formData.longitude || '-'" />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="纬度" :value="formData.latitude || '-'" />
      </van-cell-group>
      <van-form @submit="onSubmit">
        <van-field v-model="formData.manager" name="负责人" input-align="right" label="负责人" placeholder="请输入负责人"
          right-icon="arrow" @change="formData.manager = $event.detail" />
        <!-- :rules="[{ required: true, message: '请填写用户名' }]" -->
        <van-field v-model="formData.managerTel" name="联系方式" input-align="right" right-icon="arrow" label="联系方式"
          @change="formData.managerTel = $event.detail" placeholder="请输入联系方式" />

        <van-field v-model="formData.dailyProcessing" name="日处理能力" input-align="right" right-icon="arrow" label="日处理能力"
          @change="formData.dailyProcessing = $event.detail" placeholder="请输入日处理能力" />

        <!-- :rules="[{ required: true, message: '请填写密码' }]" -->
        <!-- <van-field
          readonly
          clickable
          name="picker"
          :value="value"
          label="日处理能力"
          right-icon="arrow"
          placeholder="点击选择日处理能力"
          input-align="right"
          @click.native="showPicker = true"
        />
        <van-popup :show="showPicker" @close="showPicker=false" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup> -->

        <van-field v-model="formData.serviceLife" name="使用寿命" input-align="right" right-icon="arrow"
          @change="formData.serviceLife = $event.detail" label="使用寿命" placeholder="请输入使用寿命" />

        <!-- installTime -->
        <van-field readonly clickable name="datetimePicker" :value="formData.installTime" input-align="right"
          right-icon="arrow" label="安装时间" placeholder="点击选择时间" @click.native="showDatePicker = true" />
        <van-popup :show="showDatePicker" @close="showDatePicker=false" position="bottom">
          <van-datetime-picker :value="value1" type="date" @confirm="onConfirm" @cancel="showDatePicker = false" />
        </van-popup>

        <van-field v-model="formData.factory" name="厂家" input-align="right" right-icon="arrow"
          @change="formData.factory = $event.detail" label="厂家" placeholder="请输入厂家" />

        <van-field v-model="formData.brand" name="品牌" input-align="right" right-icon="arrow"
          @change="formData.brand = $event.detail" label="品牌" placeholder="请输入品牌" />
      </van-form>
    </view>
    <div
      style="width:calc(100% - 100rpx);padding: 31rpx 50rpx 60rpx 50rpx;position: absolute; left: 0; bottom: 0;background-color: #fff;">
      <van-button @click="onSubmit" block type="info" color="#3C8AFF" native-type="submit">提交信息</van-button>
    </div>
  </view>
</template>

<script>
import { terminalDetailInfoQuery, editTerminalDetailInfo } from '@/api/terminal'
export default {
  data() {
    return {
      value1: new Date().getTime(),
      username: '',
      password: '',
      picker: '',
      formData: {},
      formData1: {
        manager: '',
        managerTel: '',
        dailyProcessing: '',
        serviceLife: '',
        installTime: '',
        factory: '',
        brand: '',
      },
      value: '',
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      showPicker: false,
      showDatePicker: false
    }
  },
  onLoad(event) {
    console.log(event.id, 'terminalIdterminalIdterminalId')
    this.terminalDetailInfoQuery(event.id)
  },
  methods: {
    goToBack() {
      this.$tab.navigateBack()
    },
    onConfirm(value) {
      this.value1 = value.detail;
      this.formData.installTime = new Date(value.detail).format('yyyy-MM-dd')
      this.showDatePicker = false;
    },
    async onSubmit() {
      console.log(this.formData, '我是提交')
      const res = await editTerminalDetailInfo({ ...this.formData, installTime: new Date(this.formData.installTime).format('yyyy-MM-dd hh:mm:ss') })
      if (res.data.code === 200) {
        this.$modal.msgSuccess('操作成功')
      } else {
        this.$modal.showToast(res.data.message)
      }
    },
    /** 查询设备详情 */
    async terminalDetailInfoQuery(id) {
      const { data: { result } } = await terminalDetailInfoQuery({ id })
      this.formData = {
        ...result,
        installTime: new Date(result.installTime).format('yyyy-MM-dd')
      }
      this.value1 = new Date(result.installTime).getTime()
    }
  }

}
</script>

<style lang="scss" scoped>
.top-bg {
  width: 100%;
  height: 330rpx;
  background: #2769f7;
  border-radius: 0rpx 0rpx 140rpx 140rpx;
  padding-top: 104rpx;
  text-align: center;
  font-weight: 600;
  font-size: 40rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
  position: relative;
  .return {
    position: absolute;
    left: 32rpx;
    margin-top: 8rpx;
  }
}
.decoration {
  width: 7rpx;
  height: 26rpx;
  margin-right: 10px;
  background-color: #08e183;
  border-radius: 4rpx;
}
.rowStyle {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 50rpx;
  margin: 30rpx 0 28rpx 0;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 28rpx;
  .label {
    width: 28%;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 50rpx;
    opacity: 0.6;
  }
  .value {
    width: 72%;
    text-align: right;
  }
}
.cardContent {
  position: absolute;
  width: calc(100% - 104rpx);
  top: 182rpx;
  left: 20rpx;
  margin: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  .terminalName {
    font-weight: 800;
    font-size: 28rpx;
    color: #4a4a4a;
    line-height: 40rpx;
    margin: 12rpx;
    padding-bottom: 10rpx;
  }
}
.cardTitle {
  display: block;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 34rpx;
  span {
    display: inline-block;
    padding: 6rpx 7rpx;
    font-size: 26rpx;
    font-weight: 500;
    line-height: 24rpx;
    border-radius: 4rpx;
    margin-left: 9rpx;
    vertical-align: middle;
  }
  .online {
    background: #bcf4d1;
    color: #08b047;
  }
  .offline {
    background: #e4e4e4;
    color: #777777;
  }
  .abnormal {
    color: #f23535;
    background: #ffdada;
  }
  .notActive {
    background: #fff1da;
    color: #feb949;
  }
}
</style>